@extends('develop.layoutEdit')

@section('title')

    <li class="cur">
        <span>提货时间设置</span>
    </li>

@endsection


@section('css')
    <link rel="stylesheet" type="text/css" href="/framework/jquery/jquery-ui.css" />
    <style>
        .layer-go-back{
            display:none;
        }
        .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
        .ui-timepicker-div dl { text-align: left; }
        .ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
        .ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
        .ui-timepicker-div td { font-size: 90%; }
        .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

        .ui-timepicker-rtl{ direction: rtl; }
        .ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
        .ui-timepicker-rtl dl dt{ float: right; clear: right; }
        .ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }
    </style>
@endsection

@section('content')

    <!--配送时间段-->
    <div id="send_time_slot_data" style="margin-left: 155px; width: 650px;">
        <div class="panel panel-default">
            <div class="panel-heading">提货时间列表</div>
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th style="text-align:center;">提货开始时间</th>
                    <th style="text-align:center;">提货结束时间</th>
                    <th style="text-align:center;">下单截止时间</th>
                    <th style="text-align:center;">操作</th>
                </tr>
                </thead>
                <tbody id="bill-pick">

                </tbody>
            </table>
        </div>
        <button type="button" class="btn btn-primary" onclick="func.billTime();">添加时间段</button>
        <div style="margin-top: 10px;">
            <span style="margin-right: 20px">提货日期可选<input class="form-control" style="width: 50px; display: inline-block; margin: 0 20px; text-align: center;" type="text" id="send_date" name="send_date" maxlength="20"  value="0" />天</span>
            <span class="help-block" style="display: inline-block;">默认1是代表客户只能选择当天的时间段，如果设置了2代表客户可选择今天和明天的时间段</span>
        </div>
    </div>

    <div class="form-group">
        <input type="hidden" name="function_id" id="function_id" value="{{ $function_id or ''}}">
        <input type="hidden" name="timeID_flg" id="timeID_flg" value="">
        <input type="button"  value="保存" onclick="func.edit();" class="btn btn-success" style="margin-top: 20px;margin-left: 155px;">
    </div>

@endsection

@section('js')
    <script src="/framework/jquery/jquery-ui.min.js"></script>
    <script src="/framework/jquery/jquery-ui-timepicker-addon.js"></script>
    <script>

        $("#send_start_time,#send_end_time,#order_dead_time").timepicker({timeFormat:'HH:mm:ss',showHour: true,showMinute: true,showSecond: true,});

        var layer_index = 0;

        var configure_json = 0 ;
        if ( !E.isEmpty({!! $configure_json or 0 !!}) ) {
            configure_json = eval( '(' + '{!! $configure_json or 0 !!}'  + ')' );
        }

        var func = {

            timeID : 1,         //配送时间ID

            detail : [],        //配送时间数组信息

            detail_solt: [],   //配送时间段数组信息

            //配送时间\配送时间段 弹出层
            billTime:function( timeID ){

                var solt_html = '';
                solt_html += '<div id="pop_time_solt">';
                solt_html += '<form id="group-form" onsubmit="return false;" class="form-horizontal" role="form" style="margin-top: 10px;">';
                solt_html += '<div class="form-group">';
                solt_html += '<label class="col-sm-4 control-label" for="send_start_time"><span class="red mr5">*</span>配送开始时间：</label>';
                solt_html += '<div class="col-sm-5">';
                solt_html += '<input class="form-control" readonly type="text" id="send_start_time" name="send_start_time" maxlength="20" placeholder="请输入配送开始时间"  value="" />';
                solt_html += '</div>';
                solt_html += '</div>';
                solt_html += '<div class="form-group">';
                solt_html += '<label class="col-sm-4 control-label" for="send_end_time"><span class="red mr5">*</span>配送结束时间：</label>';
                solt_html += '<div class="col-sm-5">';
                solt_html += '<input class="form-control" readonly type="text" id="send_end_time" name="send_end_time" maxlength="20" placeholder="请输入配送结束时间"  value="" />';
                solt_html += '</div>';
                solt_html += '</div>';
                solt_html += '<div class="form-group">';
                solt_html += '<label class="col-sm-4 control-label" for="order_dead_time"><span class="red mr5">*</span>下单截止时间：</label>';
                solt_html += '<div class="col-sm-5">';
                solt_html += '<input class="form-control" readonly type="text" id="order_dead_time" name="order_dead_time" maxlength="20" placeholder="请输入下单截止时间"  value="" />';
                solt_html += '</div>';
                solt_html += '</div>';
                solt_html += '</form>';
                solt_html += '</div>';

                var name = '';
                if ( timeID ) {
                    name = '修改配送时间段';
                    $('#send_start_time').val($('#star_solt_' + timeID).text());
                    $('#send_end_time').val($('#end_solt_' + timeID).text());
                    $('#order_dead_time').val($('#order_solt_' + timeID).text());
                } else {
                    name = '添加配送时间段';
                }

                layer_index = layer.open({
                    type: 1,
                    area: ['460px', 'auto'],
                    offset: '50px',
                    shadeClose: true, //点击遮罩关闭
                    title: name,
                    content: solt_html,
                    btn: ['保存', '取消'],
                    yes: function (index) {
                        if ( timeID ) {
                            func.timeEdit(timeID);
                        } else {
                            func.timeAdd();
                        }

                    }
                });
                if ( timeID ) {
                    $('#send_start_time').val($('#star_solt_' + timeID).text());
                    $('#send_end_time').val($('#end_solt_' + timeID).text());
                    $('#order_dead_time').val($('#order_solt_' + timeID).text());
                }
                $("#send_start_time,#send_end_time,#order_dead_time").timepicker({timeFormat:'HH:mm:ss',showHour: true,showMinute: true,showSecond: true,});
            },

            //添加\修改 配送时间
            timeAdd: function(){
                var time_data = { };

                var send_start_time = $('#send_start_time').val();
                var send_end_time = $('#send_end_time').val();
                var order_dead_time = $('#order_dead_time').val();
                var msg = '';
                if ( E.isEmpty(send_start_time) ) {
                    msg += '提货开始时间不能为空<br>';
                }
                if ( E.isEmpty(send_end_time) ) {
                    msg += '提货结束时间不能为空<br>';
                }
                if ( E.isEmpty(order_dead_time) ) {
                    msg += '下单截止时间不能为空<br>';
                }
                if( send_end_time < send_start_time ){
                    msg += '提货开始时间不能大于提货结束时间<br>';
                }
                if ( !E.empty(msg) ) {
                    layer.alert(msg,{icon:2});
                    return false;
                }

                var html = '';
                html += '<tr class="time_solt_'+ func.timeID +'" flg="'+ func.timeID +'">';
                html += '<td style="text-align:center;" id="star_solt_'+ func.timeID +'">'+ send_start_time +'</td>';
                html += '<td style="text-align:center;" id="end_solt_'+ func.timeID +'">'+ send_end_time +'</td>';
                html += '<td style="text-align:center;" id="order_solt_'+ func.timeID +'">'+ order_dead_time +'</td>';
                html += '<td style="text-align:center;">';
                html += '<a href="javascript:void(0);" onclick="func.billTime(' + func.timeID + ');">修改</a>&nbsp;&nbsp;';
                html += '<a href="javascript:void(0);" onclick="func.del(' + func.timeID + ');">删除</a> ';
                html += '</td>';
                html += ' </tr>';
                $('#bill-pick').append(html);

                time_data.timeID = func.timeID;
                time_data.send_start_time = send_start_time;
                time_data.send_end_time = send_end_time;
                time_data.order_dead_time = order_dead_time;
                func.detail_solt.push(time_data);

                $('#timeID_flg').val(func.timeID);
                $('input[name="send_start_time"]').val('');
                $('input[name="send_end_time"]').val('');
                $('input[name="order_dead_time"]').val('');

                func.timeID ++;
                layer.close(layer_index);
            },

            //修改
            timeEdit: function( timeID ){

                var send_start_time = $('#send_start_time').val();
                var send_end_time = $('#send_end_time').val();
                var order_dead_time = $('#order_dead_time').val();
                $('#star_solt_' + timeID).text(send_start_time);
                $('#end_solt_' + timeID).text(send_end_time);
                $('#order_solt_' + timeID).text(order_dead_time);

                $.each(func.detail_solt, function(k, v){
                    if (v.timeID == timeID) {
                        v.send_start_time = send_start_time;
                        v.send_end_time = send_end_time;
                        v.order_dead_time = order_dead_time;
                    }
                });
                $('input[name="send_start_time"]').val('');
                $('input[name="send_end_time"]').val('');
                $('input[name="order_dead_time"]').val('');

                layer.close(layer_index);
            },

            //删除
            del: function( timeID ){            //配送方式一

                $('.time_solt_' + timeID).remove();
                if (!E.empty(func.detail_solt)) {
                    $.each(func.detail_solt, function(k, v){
                        if ( timeID == v.timeID ) {
                            func.detail_solt.splice(k,1);
                            return false;
                        }
                    });
                }

            },

            //配送时间\配送时间段信息
            sendConten: function(){
                if ( configure_json['configure'] ) {

                    $('#send_time_data').hide();
                    $('#send_time_slot_data').show();

                    var html = '';
                    if ( configure_json['configure']['detail'] ) {
                        $.each( configure_json['configure']['detail'], function (k, v) {
                            html += '<tr class="time_solt_' + v.timeID + '" flg="' + v.timeID + '">';
                            html += '<td style="text-align:center;" id="star_solt_' + v.timeID + '">' + v.send_start_time + '</td>';
                            html += '<td style="text-align:center;" id="end_solt_' + v.timeID + '">' + v.send_end_time + '</td>';
                            html += '<td style="text-align:center;" id="order_solt_' + v.timeID + '">' + v.order_dead_time + '</td>';
                            html += '<td style="text-align:center;">';
                            html += '<a href="javascript:void(0);" onclick="func.billTime(' + v.timeID + ');">修改</a>&nbsp;&nbsp;';
                            html += '<a href="javascript:void(0);" onclick="func.del(' + v.timeID + ');">删除</a> ';
                            html += '</td>';
                            html += ' </tr>';

                            var time_data = {};
                            time_data.timeID = v.timeID;
                            time_data.send_start_time = v.send_start_time;
                            time_data.send_end_time = v.send_end_time;
                            time_data.order_dead_time = v.order_dead_time;
                            func.detail_solt.push(time_data);
                        });
                    } else {
                        configure_json['configure']['timeID_flg'] == 1 ;
                    }
                    $('#bill-pick').html(html);

                    $('#send_date').val(configure_json['configure']['send_date']);

                    $('#timeID_flg').val( configure_json['configure']['timeID_flg'] );
                    func.timeID = parseFloat( configure_json['configure']['timeID_flg'] ) + 1;
                }
            },

            //保存
            edit:function(){

                //表单数据
                var dt = E.getFormValues("edit-form");
                //组装ajax数据
                var data = { };
                var configure ={ };
                configure.timeID_flg = $('#timeID_flg').val();
                var msg ='';

                func.detail = [];
                configure.send_date = $('#send_date').val();
                configure.function_id = $('#function_id').val();
                configure.detail = func.detail_solt;

                //参数判断
                if( E.isEmpty( configure.function_id ) || !E.isInt( configure.function_id ) ) {
                    msg += '参数错误<br/>' ;
                }
                if ( E.isEmpty(configure.send_date) || configure.send_date <=0 ) {
                    msg += '配送日期不能为空且要大于0<br>';
                }

                if(msg){
                    layer.alert(msg,{icon:2});
                    return false;
                }

                layer_index = layer.confirm('您确认保存提货时间设置吗？', {icon:3}, function( index ) {
                    layer.close( index );
                    E.ajax({
                        type:'get',
                        url: '/lar/develop/function/store/'+function_id,
                        dataType:'json',
                        data: configure,
                        // 返回值判断
                        success: function ( obj ){

                            if ( obj.code == 200 ) {
                                layer.alert( obj.message , { icon: 1,time : 1500 } ) ;
                            } else {
                                layer.alert( obj.message , { icon: 2 } ) ;
                            }
                        }
                    });
                });

            }

        };

        func.sendConten();

    </script>
@endsection